<!DOCTYPE html>
<html>
<head>
    <title>WebdriverJS Testpage</title>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

    <header>
        <h1>WebdriverJS Testpage</h1>
        <a href="gestureTest.html">2</a>
        <a href="index.html">1</a>
    </header>

    <section class="page">
        <h1 class="findme">Test CSS Attributes</h1>

        <a href="./two.html" id="secondPageLink">two</a>
        <a href="https://github.com" id="githubRepo" class="clearfix" data-foundBy="link text">GitHub Repo</a>
        <a id="newWindow" href="./two.html" target="_blank" data-foundBy="partial link text">open new tab</a>

        <hr>

        <div class="box red" data-foundBy="css selector"></div>
        <div class="box green"></div>
        <div class="box yellow"></div>
        <div class="box black"></div>
        <div class="box purple" id="purplebox" data-foundBy="id"></div>

        <div class="nested" style="text-transform: uppercase">
            <h2 class="findme">nested elements</h2>
            <div><span data-foundBy="xpath">nested span</span></div>
            <aside class="moreNesting">
                <h3 class="findme">more nested</h3>
                <section><span>bar</span></section>
            </aside>
            <a href="#" class="firstClassNested">Hello</a>
        </div>

        <hr>

        <button class="btn1">Klick #1</button>
        <div class="btn1_clicked">Button #1 clicked</div>
        <div class="btn1_middle_clicked">Button #1 middle-clicked</div>
        <div class="btn1_right_clicked">Button #1 right-clicked</div>
        <div class="btn1_dblclicked">Button #1 dblclicked</div>
        <button class="btn2" disabled="">Klick #2</button>
        <div class="btn2_clicked">Button #2 clicked</div>
        <div class="btn2_dblclicked">Button #2 dblclicked</div>
        <div class="overlay" id="overlay">&nbsp;</div>
        <button class="btn3">Klick #3</button>
        <div class="btn3_clicked">Button #3 clicked</div>
        <div class="btn3_dblclicked">Button #3 dblclicked</div>
        <button style="height: 1px; width:1px; border:0;" class="btn4">Klick #4</button>
        <div class="btn4_clicked">Button #4 clicked</div>
        <div class="btn4_dblclicked">Button #4 dblclicked</div>
        <select name="selectbox" id="selectbox">
            <option value="1" class="option1">1</option>
            <option value="2" class="option2" selected="selected">2</option>
            <option value="3" class="option3">3</option>
        </select>
        <select name="selectbox2" id="selectTest">
            <optgroup>
                <option value="someValue1">uno</option>
                <option value="someValue2">   dos   </option>
                <option value="   someValue3  ">tres</option>
            </optgroup>
            <optgroup>
                <option value="someValue4">cuatro</option>
                <option value="someValue5">cinco</option>
                <option value="someValue6">seis</option>
            </optgroup>
            <optgroup>
                <option name="someName7" value="someValue7">"siete"</option>
                <option name="someName8" value="someValue8">ocho "huit" (otto)</option>
                <option name="   someName9   " value="someValue9">nu"eve</option>
                <option name="someName10" value="someValue10">diez"</option>
            </optgroup>
        </select>
        <hr>
        <input type="search" class="searchinput" name="searchinput" data-foundBy="name">
        <input type="checkbox" name="checkbox" class="checkbox_selected" checked>
        <input type="checkbox" name="checkbox" class="checkbox_notselected">
        <input type="radio" name="radio" class="radio_selected" checked>
        <input type="radio" name="radio" class="radio_notselected">
        <input type="radio" name="radio2" class="radio_waitForSelected">
        <input type="radio" name="radio2" class="radio_waitForSelectedReverse" checked>
        <input type="text" class="waitForValueEnabled" name="waitforinput" disabled="disabled" value="some content">
        <input type="text" class="waitForValueEnabledReverse" name="waitforinput">
        <div class="visibletest invisible">I am not visible</div>
        <div class="visibletest hidden">I am not visible</div>
        <div class="invisibleParent hidden"><div class="visibletestInner">I am not visible, am I?</div></div>
        <hr>
        <table>
            <tr><td>2015-03-01</td><td>12:00</td></tr>
            <tr><td>2015-03-02</td><td>12:00</td></tr>
        </table>
        <hr>
        <form method="GET" action="index.html" class="send">
            <input name="a" value="a">
            <input name="b" value="b">
            <input name="c" value="c">
            <input name="d" value="d" disabled>
            <input type="file" id="upload-test">
            <input type="submit" value="send" class="sendBtn">
        </form>
        <div class="sometext">some text</div>
        <div class="sometextlater"></div>
        <div class="opacity">Hello! I am not visible anyway</div>
        <script>
        if (qry('a') === 'a') {
            document.write('<div class="gotDataA">got data from input[name="a"]</div>')
        }
        if (qry('b') === 'b') {
            document.write('<div class="gotDataB">got data from input[name="b"]</div>')
        }
        if (qry('c') === 'c') {
            document.write('<div class="gotDataC">got data from input[name="c"]</div>')
        }

        function qry(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split('&');
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split('=');
                if (decodeURIComponent(pair[0]) == variable) {
                    return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', variable);
        }
        </script>
        <textarea cols="30" rows="10" data-foundBy="tag name"></textarea>

        <div class="goAway">I will be gone in a second</div>
        <div class="notVisible" style="visibility: hidden;">Where was I?</div>
        <div class="onMyWay">On my way out of the document!</div>

        <div style="background:silver;">
            <h2>staleElementTests</h2>
            <h3>Test 1</h3>
            <ul class="staleElementContainer1"></ul>
            <h3>Test 2</h3>
            <ul class="staleElementContainer2"></ul>
        </div>

        <div class="notInViewports notInViewport">Where am I?</div>
        <div class="notInViewports">Where am I?</div>

        <div class="viewportTest outTopLeft"></div>
        <div class="viewportTest outTopRight"></div>
        <div class="viewportTest outBottomLeft"></div>
        <div class="viewportTest outBottomRight"></div>

        <script src="components/jquery/jquery.min.js"></script>
        <script src="components/hammerjs/hammer.js"></script>
        <script src="components/hammerjs/plugins/hammer.showtouches.js"></script>
        <script src="components/jquery-ui/ui/jquery-ui.js"></script>
        <script>
            $('.btn1')
            .mousedown(function(e) {
                switch(e.which) {
                    case 1:
                        $('.btn1_clicked').css('display','block');
                    break;
                    case 2:
                        $('.btn1_middle_clicked').css('display','block');
                    break;
                    case 3:
                        $('.btn1_right_clicked').css('display','block');
                    break;
                }
                return false;
            })
            .contextmenu(function() {
                console.info('on contextmenu');
                return false;
            });
            $('.btn2').click(function() {
                $('.btn2_clicked').css('display','block');
            });
            $('.btn3').click(function() {
                $('.btn3_clicked').css('display','block');
            });
            $('.btn4').click(function() {
                $('.btn4_clicked').css('display','block');
            });
            $('.btn1').dblclick(function() {
                $('.btn1_dblclicked').css('display','block');
            });
            $('.btn2').dblclick(function() {
                $('.btn2_dblclicked').css('display','block');
            });
            $('.btn3').dblclick(function() {
                $('.btn3_dblclicked').css('display','block');
            });
            $('.btn4').dblclick(function() {
                $('.btn4_dblclicked').css('display','block');
            });

            $('#overlay').click(function() {
                console.log('overlay was just clicked');
            });

            $("#overlay,[data-foundBy=\"xpath\"]").draggable();
            $(".red,h2").droppable({
              drop: function( event, ui ) {
                $('.searchinput').val( "Dropped!" );
              }
            });

            setTimeout(function() {
                var newElement = $('<div />').addClass('lateElem').html('Sorry, I\'m late!');
                $('body').append(newElement);
                $('.goAway').remove();
                $('.radio_waitForSelected').attr('checked','checked');
                $('.radio_waitForSelectedReverse').removeAttr('checked');
                $('.waitForValueEnabled').val('').removeAttr('disabled');
                $('.waitForValueEnabledReverse').val('some content').attr('disabled','disabled');
                $('#selectbox').get(0).value = "3";
                $('.sometextlater').html('some text');
                $('.sometext').html('');
                $('.notVisible').css('visibility', 'visible');
                $('.onMyWay').css('visibility','hidden');
                $('.invisibleParent').removeClass('hidden');
            },2000);

            // Hammer(document.body).on('tap', function(e) {

            //     $('<div />').css('width',10).css('height',10).css('background','red')
            //                 .css('position','absolute').css('left',e.gesture.center.pageX - 5)
            //                 .css('top',e.gesture.center.pageY - 5).appendTo('body')
            //                 .html(e.gesture.center.pageX + ' - ' + e.gesture.center.pageY + ', ' + $('.btn1').width() + ' - ' + $('.btn1').height());

            // })

            function addRow(container, test, count) {
                var newRow = document.createElement('li');
                newRow.classList.add('stale-element-container-row');
                newRow.classList.add('stale-element-container-row-' + count);
                newRow.innerHTML = count;
                container.appendChild(newRow);
                return newRow;
            }

            function removeRow(row) {
                if (row) row.parentNode.removeChild(row);
            }

            function staleElementTest1() {
                var container = document.querySelector('.staleElementContainer1');

                var count = 0;
                var lastRow;

                function loop() {
                    count++;
                    removeRow(lastRow);
                    lastRow = addRow(container, 1, count);
                }

                setInterval(loop, 200);
            }

            function staleElementTest2() {
                var container = document.querySelector('.staleElementContainer2');

                var timeout = 1000;
                for (var i = 1; i <= 40; i++) {
                    timeout += 111;
                    var row = addRow(container, 2, i);
                    setTimeout(removeRow.bind(null, row), timeout);
                }
            }

            staleElementTest1();
            staleElementTest2();
        </script>

    </section>
</body>
</html>
